<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-DOM</title>
</head>

<body>
    <img id="h1" src="img/off.gif"> <br><br>

    <div class="cls">传智教育</div> <br>
    <div class="cls">黑马程序员</div> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
</body>

<script>
    // 1. 获取Element 元素
    // 1.1 获取元素-根据ID获取
    // var img = document.getElementById("h1");
    // alert(img);

    // 1.2 获取元素-根据标签获取
    /*    var divs = document.getElementsByTagName("div");
       for (let i = 0; i < divs.length; i++) {
           alert(divs[i]);
       } */

    // 1.3 获取元素-根据name属性获取
    /*     var ins = document.getElementsByName('hobby');
        for (let i = 0; i < ins.length; i++) {
            alert(ins[i]);
        } */
    // 1.4 获取元素-根据class 属性获取
    /*   var divs = document.getElementsByClassName('cls');
      for (let i = 0; i < divs.length; i++) {
          alert(divs[i]);
      } */
    // 2. 查询参考手册，属性，方法
    var divs = document.getElementsByClassName('cls');
    var div1 = divs[0];

    div1.innerHTML = "传智教育666";
</script>

</html>